<div ng-controller="UI.IconTestController">

  <script type="text/ng-template" id="example-html">

<style>

/* Define icon sizes in CSS
   use the 'class' attribute
   to handle icons that are
   wider than they are tall */
.icon-example i:before,
.icon-example img {
  vertical-align: middle;
  line-height: 32px;
  font-size: 32px;
  height: 32px;
  width: auto;
}

.icon-example img.girthy {
  height: auto;
  width: 32px;
}
</style>

<!-- Here we turn an array of
     simple objects into icons! -->
<ul class="icon-example inline">
  <li ng-repeat="icon in icons">
    <hawtio-icon config="icon"></hawtio-icon>
  </li>
</ul>
  </script>

  <script type="text/ng-template" id="example-config-json">
[{
  "title": "Awesome!",
  "src": "icon-thumbs-up"
},
{
  "title": "Apache Karaf",
  "type": "icon",
  "src": "icon-beaker"
},
{
  "title": "Fabric8",
  "type": "img",
  "src": "img/icons/fabric8_icon.svg"
},
{
  "title": "Apache Cassandra",
  "src": "img/icons/cassandra.svg",
  "class": "girthy"
}]
  </script>


  <div class="row-fluid">
    <h3>Icons</h3>
    <p>A simple wrapper to handle arbitrarily using FontAwesome icons or images via a simple configuration</p>
    <h5>HTML</h5>
    <p>The icon sizes are specified in CSS, we can also pass a 'class' field to the icon as well to handle icons that are wider than they are tall for certain layouts</p>
    <div hawtio-editor="exampleHtml" mode="html"></div>
    <h5>JSON</h5>
    <p>Here we define the configuration for our icons, in this case we're just creating a simple array of icon definitions to show in a list</p>
    <div hawtio-editor="exampleConfigJson" mode="javascript"></div>
    <div class="directive-example">
      <div compile="exampleHtml"></div>
    </div>
  </div>


</div>
